<template>
    <div class="detail">
        <div class="top">
            <div class="info flex-row">
                <div class="user_info flex-row">
                    <div class="avatar">
                        <img :src="userInfo?.avatar" alt="">
                    </div>
                    <div class="username">
                        <div class="name">{{ userInfo?.nickname }}</div>
                        <div class="account">
                            用户编号：{{ userInfo.number }}
                            <span style="margin-left: 10px;color: #fa5151;"  @click="copy(userInfo.number as string)">复制</span>
                            <!-- <van-icon name="completed-o" @click="copy(userInfo.number as string)" /> -->
                        </div>
                    </div>
                </div>
                <!-- <div class="message">
                    <img src="../../assets/user/notice.png" alt="">
                    <div class="point"></div>
                </div> -->
            </div>
        </div>
        <div class="content">
            <div class="withdraw">
                <div class="title">可提现金额</div>
                <div class="detail">
                    <div class="money">{{ money }}</div>
                    <div class="btn" @click="withdraw()">提现</div>
                </div>
            </div>
            <div class="function">
                <!-- 绑定手机号 -->
                <div class="fuction_item flex-row">
                    <div class="item_lf flex-row">
                        <div class="_icon"><img src="../../assets/user/phone.png" alt=""></div>
                        <div class="desc">绑定手机号</div>
                    </div>
                    <div class="item_rg">{{ profileInfo.pryvacyPhone }}</div>
                </div>
                <!-- 实名认证 -->
                <div class="fuction_item flex-row" @click="handleJump('/real-auth',{type:profileInfo.authentication_status})">
                    <div class="item_lf flex-row">
                        <div class="_icon"><img src="../../assets/user/real.png" alt=""></div>
                        <div class="desc">实名认证</div>
                    </div>
                    <div class="item_rg" :class="{ 'item_no_anth' : !profileInfo.authentication_status}">{{ profileInfo.authentication_status ? '已认证' : '去认证'  }}</div>
                </div>
                <!-- 提现账户 -->
                <!-- <div class="fuction_item flex-row" @click="handleJump('/payouts/type')">
                    <div class="item_lf flex-row">
                        <div class="_icon"><img src="../../assets/user/account.png" alt=""></div>
                        <div class="desc">提现账户</div>
                    </div>
                    <div class="item_rg"><van-icon name="arrow" /></div>
                </div> -->
                <!-- 登录密码 -->
                <div class="fuction_item flex-row">
                    <div class="item_lf flex-row">
                        <div class="_icon"><img src="../../assets/user/password.png" alt=""></div>
                        <div class="desc">登录密码</div>
                    </div>
                    <div class="item_rg setting" @click="handleJump('/forget')">{{ profileInfo.password == '已设置' ? '修改密码' : '去设置' }}</div>
                </div>
            </div>
            <div class="distory" @click="loginOut()">
                <div class="logout">退出登录</div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { showConfirmDialog,showToast }  from 'vant'
import router from "@/router";
import { userStore } from "@/store/userInfo";
import { loginStore } from "@/store/login";
import { apiGetProfile,apiGetUserInfo,getWithdrawableAmount } from "@/api/loginApi";
interface UserInfo {
    uuid?: string;
    phone?: string;
    nickname?: string;
    avatar?: string;
    status?: number;
    number?:string
}
const userInfo = ref<UserInfo>({
    uuid: '',
    phone: '',
    nickname: '',
    avatar: '',
    status: 0,
    number:''
})
const money = ref(0)
const profileInfo = ref<any>({})
// const {uuid,phone,nickname,avatar,status} = userInfo.value
onMounted(async() => {
    await getUserInfo()
    await getInfo()
    await getMoney()
    const userMsg = userStore()
    userMsg.setInfo({...userInfo.value,... profileInfo.value,money:money.value})
})


// 获取用户信息
const getUserInfo = async() => {
    const res = await apiGetProfile()
    if(res && res.code == 200) {
        userInfo.value = res.data.profile
    }
}
// 获取认证权限
const getInfo = async() => {
    const res = await apiGetUserInfo()
    if(res && res.code == 200) {
        profileInfo.value = res.data
        profileInfo.value.pryvacyPhone = res.data.phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
    }
}
// 获取可提现金额
const getMoney = async() => {
    const res = await getWithdrawableAmount()
    money.value = res.data.cumulativeIncome
}
// 提现
const withdraw = () =>  {
    if(profileInfo.value.authentication_status) {
        router.push('/payouts');
    }else {
        router.push('/real-auth');
    }
}
// 一键复制
const copy = async(text:string) => {
    let clipboard = navigator.clipboard || {
          writeText: (text) => {
            let copyInput = document.createElement('input');
            copyInput.value = text;
            document.body.appendChild(copyInput);
            copyInput.select();
            document.execCommand('copy');
            document.body.removeChild(copyInput);
          }
        }
        if (clipboard) {
          await clipboard.writeText(text)
          showToast('复制成功')
        }

}
// 路由跳转
const handleJump = (path: string,query?:any) => {  
    router.push({ path,query: query ? query : undefined });
}
// 退出登录
const loginOut = () => {
    showConfirmDialog({
    message: "是否确定退出登录？",
  })
    .then(() => {
    const login = loginStore()
    const userMsg = userStore()
    login.resetToken()
    login.resetNewToken()
    userMsg.resetInfo()
    router.push('/login')
    showToast('已退出登录')
    })
    .catch(() => {
        //   点击取消
    });
};
</script>
<style lang="less" scoped>
@import "./index.less";
</style>